<template>
  <div class="app-container">
    <div style="width: 800px">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="话题名称" prop="name">
          <el-input size="small" v-model="form.name" placeholder="请输入话题名称" />
        </el-form-item>
        <el-form-item label="话题分类" prop="tagCategoryId">
          <el-select size="small" style="width:100%;" v-model="form.tagCategoryId" placeholder="请选择话题分类">
            <el-option
                v-for="item in oneTagList"
                :key="item.code"
                :label="item.value"
                :value="item.code">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缩略图" required>
          <div style="color:#999">建议尺寸750*560px或4：3，JPG、PNG格式， 图片小于5M。</div>
          <el-upload
            :class="imgFilesList.length?'hiddenUpload':''"
            action="https://service.bairicun.com/file/upload"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="imgFilesList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input size="small" v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="话题介绍" prop="detail">
          <el-input
            type="textarea"
            :rows="5"
            size="small"
            v-model="form.detail"
            placeholder="请输入话题介绍"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button size="small" @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  threadTagSaveApi,
  getThreadTagDetailApi,
  getOneTypeListApi
} from '@/api/forum'
import Tinymce from "@/components/Tinymce";
export default {
  components: { Tinymce },
  data() {
    return {
      form: {
        name: "",
        tagCategoryId: "",
        sort: "",
        detail: "",
      },
      imgFilesList: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入话题名称",
            trigger: "blur"
          }
        ],
        tagCategoryId: [
          {
            required: true,
            message: "请选择话题分类",
            trigger: "change"
          }
        ],
        sort: [
          {
            required: false,
            message: "请输入第三方地址",
            trigger: "blur"
          }
        ],
        detail: [
          {
            required: false,
            message: "请输入话题介绍",
            trigger: "blur"
          }
        ]
      },
      dialogImageUrl: "",
      dialogVisible: false,
      uploadStatus: false,
      uploadUrl: "",
      oneTagList: []
    };
  },
  created() {
    this.getOneType()
    this.getDetal()
  },
  methods: {
    getOneType() {
      getOneTypeListApi({
        type: 'thread'
      }).then((res) => {
        this.oneTagList = res.data
      })
    },
    getDetal() {
      getThreadTagDetailApi(this.$route.query.editId).then((res) => {
        this.form.name = res.data.name
        this.form.sort = res.data.sort
        this.form.tagCategoryId = res.data.tagCategoryId
        this.form.detail = res.data.detail
        this.imgFilesList = [
          {
            url: res.data.picUrl,
            id: res.data.picId,
          }
        ]
      })
    },
    handleRemove(file, fileList) {
      this.imgFilesList = []
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(e) {
      console.log(e);
      if (e.code == 200) {
        this.uploadStatus = true;
        this.uploadUrl = e.data.url;
        this.imgFilesList = [
          {
            url: e.data.url,
            id: e.data.id,
          }
        ]
      }
    },
    onSubmit(formName) {
      console.log(this.content);
      // this.$message('submit!')
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.imgFilesList.length) {
            threadTagSaveApi({
              id: this.$route.query.editId,
              name: this.form.name,
              picId: this.imgFilesList[0].id,
              tagCategoryId: this.form.tagCategoryId,
              sort: this.form.sort,
              detail: this.form.detail,
              type: 'thread',
            }).then((res) => {
              this.$message.success('操作成功！');
              setTimeout(() => {
                this.$router.back(-1)
              }, 1000);
            })
          }else{
            this.$message.error('请上传缩略图！');
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    onCancel() {
      this.$router.back(-1)
    }
  }
};
</script>
<style>
.hiddenUpload .el-upload--picture-card {
  display: none !important;
}
</style>
<style scoped>
.line {
  text-align: center;
}
</style>
